<template>
    <div class="left-box">
        <titleComponent title="项目健康度(8率)" path="/projectTable"></titleComponent>
        <div class="center">
            <img src="../../../assets/img/img1.png" class="icon" />
            <div>
                <div class="title-box">
                    <div class="name">项目整体毛利率</div>
                    <div class="num">{{ getNum(project && project.profitTotal ? project.profitTotal : 0) }}%</div>
                </div>
                <div class="bg">
                    <div class="bar" :style="{ width: getNum(project && project.profitTotal ? project.profitTotal : 0) + '%' }"></div>
                </div>
            </div>
        </div>
        <div class="echarts-box">
            <div class="pie-box">
                <div class="pie-bg">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(34,225,191'" titleText="自主实施率"
                    :dataList="[getNum(project && project.selfImplementation ? project.selfImplementation : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg-blue">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(16,137,255'" bgColor="#b6e3fd" titleText="通服毛利率"
                    :dataList="[getNum(project && project.profitUniversal ? project.profitUniversal : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg-blue">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(16,137,255'" bgColor="#b6e3fd" titleText="自有产品植入率"
                    :dataList="[getNum(project && project.proprietaryProduct ? project.proprietaryProduct : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg-blue">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(16,137,255'" bgColor="#b6e3fd" titleText="自研产品植入率"
                    :dataList="[getNum(project && project.selfDevelopedProduct ? project.selfDevelopedProduct : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(34,225,191'" :titleText="'交付及时率'"
                    :dataList="[getNum(project && project.promptDelivery ? project.promptDelivery : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(34,225,191'" :titleText="'前置商机完整率'"
                    :dataList="[getNum(project && project.leadOpportunity ? project.leadOpportunity : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(34,225,191'" :titleText="'应收款占收比'"
                    :dataList="[getNum(project && project.receiptPercent ? project.receiptPercent : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(34,225,191'" :titleText="'应验未验比重'"
                    :dataList="[getNum(project && project.unverifiedPercent ? project.unverifiedPercent : 0)]"></percentPie>
            </div>
            <div class="pie-box">
                <div class="pie-bg-yellow">
                    <div class="pie-center-bg"></div>
                </div>
                <percentPie :colorArr="'rgb(255,177,68'" bgColor="#fcf1d1" titleText="项目管控能力"
                    :dataList="[getNum(project && project.controlAbility ? project.controlAbility : 0)]"></percentPie>
            </div>
        </div>
    </div>
</template>
<script>
import titleComponent from "./titleComponent";
import percentPie from "./percentPie.vue";
export default {
    props: {
        project: {
            type: Object,
            default: () => { },
        }
    },
    components: {
        titleComponent,
        percentPie
    },
    methods: {
        getNum(num) {
            // return num * 100
            return num
        }
    }
}
</script>
<style lang="scss" scoped>
.left-box {
    width: 520px;
    height: 454px;
    background: #fff;
    margin-bottom: 16px;
    padding: 16px;
    box-sizing: border-box;
}

.center {
    background: #edf2fe;
    width: 100%;
    height: 70px;
    border-radius: 7px;
    margin-top: 12px;
    display: flex;
    margin-bottom: 3px;
    .icon {
        margin: 9px 11px;
        width: 60px;
        height: 60px;
    }
}

.title-box {
    display: flex;
    justify-content: space-between;
    width: 390px;
    margin: 11px 0 6px;

    .name {
        font-size: 18px;
        margin-top: 2px;
    }

    .num {
        font-size: 24px;
        font-weight: 900;
    }
}

.bg {
    width: 100%;
    height: 6px;
    background: #d4dffe;
    border-radius: 10px;

    .bar {
        height: 6px;
        border-radius: 10px;
        background: linear-gradient(to right, #8ef5fb, #30b3ff);
    }
}

.pie-box {
    width: 33.3%;
    height: 110px;
    position: relative;
}

.echarts-box {
    display: flex;
    flex-wrap: wrap;
}

.pie-bg {
    width: 94px;
    height: 94px;
    border-radius: 100px;
    background: linear-gradient(to bottom, #bdf7ed, #fff);
    position: absolute;
    top: 8px;
    left: 35px;

    .pie-center-bg {
        width: 75px;
        height: 75px;
        border-radius: 100px;
        background: linear-gradient(to bottom, #b1f5e9, #d1f9f3);
        margin: 10px 9px;
    }
}

.pie-bg-blue {
    width: 94px;
    height: 94px;
    border-radius: 100px;
    background: linear-gradient(to bottom, #c4e9ff, #fff);
    position: absolute;
    top: 8px;
    left: 35px;

    .pie-center-bg {
        width: 75px;
        height: 75px;
        border-radius: 100px;
        background: linear-gradient(to bottom, #a9defd, #cdebfc);
        margin: 10px 9px;
    }
}

.pie-bg-yellow {
    width: 94px;
    height: 94px;
    border-radius: 100px;
    background: linear-gradient(to bottom, #fcebbb, #fff);
    position: absolute;
    top: 8px;
    left: 35px;

    .pie-center-bg {
        width: 75px;
        height: 75px;
        border-radius: 100px;
        background: linear-gradient(to bottom, #fde8af, #fcefcb);
        margin: 10px 9px;
    }
}
</style>